<template>
	<div class="t11" style="width: 100wh;">
		<div class="d2" style="width: 1440px;margin: auto;min-width: 1440px;">
			<div style=" display: inline;"v-for="(item,index) in curriculums">
				<div style="padding: 0;width: 100%;margin-top: 30px;" v-if="index%2==0">
					<div style="width: 864px;display: inline-block;height: 486px;vertical-align:top">
						<img :src="item.imagePath" style="width: 100%;height: 100%;"/>
					</div>
					<div style="display: inline-block;width: 576px;height:486px;">
						<div style="margin-top: 95px">
							<span style="font-weight: bold;font-size: 25px;margin-left: 15%;">
								{{item.name}}
							</span>
							<div class="ydy" style="margin-top: 25px;width: 80%;margin-left: 15%;">
								<div style="width: 100%;">
									<div style="margin-bottom: 50px;" v-html="item.introduce"></div>
									<button @click="handleCurrentChange()">咨询</button>
									<button @click="buy(item)" style="margin-left: 20px;">立即购买</button>
								</div>
			
							</div>
						</div>
					</div>
				</div>
				<div style="padding: 0;width: 100%;margin-top: 30px;" v-if="index%2!=0">
					<div style="display: inline-block;width: 576px;height:486px;">
						<div style="margin-top: 95px">
							<span style="font-weight: bold;font-size: 25px;margin-left: 15%;">
								{{item.name}}
							</span>
							<div class="ydy" style="margin-top: 25px;width: 80%;margin-left: 15%;">
								<div style="width: 100%;">
									<div style="margin-bottom: 50px;" v-html="item.introduce"></div>
									<button @click="handleCurrentChange()">咨询</button>
									<button @click="buy(item)" style="margin-left: 20px;">立即购买</button>
								</div>
							</div>
						</div>
					</div>
					<div style="width: 864px;display: inline-block;height: 486px;;vertical-align:top">
						<img :src="item.imagePath" style="width: 100%;height: 100%;"/>
					</div>
				</div>
				<!-- 服务项目弹窗 -->
				<el-dialog :visible.sync="editFormVisibles" :close-on-click-modal="false"
					class="edit-form" >
					<el-form   ref="" style="font-size: 15px;color: #000000;">
						<el-form-item prop="phone"  >
							<span style="font-size: 15px;font-weight: bold;">咨询电话：</span>
							<p style="font-size: 15px;">{{item.phone}}</p>
						</el-form-item>
					</el-form>
				</el-dialog>
				<el-dialog :visible.sync="buys" :close-on-click-modal="false"
					class="edit-form" >
					<el-form  label-width="80px" ref="" v-model="buyForm">
						<el-form-item prop="name">
							<span style="width: 5em;display: inline-block;">姓<span style="width: 2em;display: inline-block;"></span>名：</span>
							<el-input v-model="buyForm.name" style="width: 80%;"></el-input>
						</el-form-item>
						<el-form-item prop="phone">
							<span style="width: 5em;display: inline-block;">联系电话：</span>
							<el-input v-model="buyForm.phone" style="width: 80%;"></el-input>
						</el-form-item>
						<el-form-item prop="address">
							<span style="width: 5em;display: inline-block;">收货地址：</span>
							<el-input v-model="buyForm.address" style="width: 80%;"></el-input>
						</el-form-item>
					</el-form>
					<button style="background: orangered;line-height: 5px;margin-left: 45%;">立即支付</button>
				</el-dialog>
				<div style="border-bottom: 1px solid #e7eaed;margin-top: 20px;"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import { request } from "../util/request.js"
	
	
	export default {
	        data() {
	            return {
					editFormVisibles: false,
					curriculums:[],
					buys:false,
					buyForm:{
						name:null,
						phone:null,
						address:null
					}
	            }
	        },
			methods:{
				buy(item){
					let address=item.buyPath
					if(address==null||address==""){
						this.$message({
							message: '详细请点击咨询！'
						});
					}else{
						window.open(address, '_blank')
					}
				},
				getExpertCourses(){
					request({
					  method: 'get',
					  url: 'expertCourseInfo/getExpertCourse',
					  params:{
					  	expertId:888,
						pageNum: 1,
						pageSize: 999999,
					  }
					}).then(res=>{
						this.curriculums = res.data.list
						// console.log(res)
					})
				},
				handleCurrentChange: function() {
					this.editFormVisibles = true; 
				},
			},
			created() {
				this.getExpertCourses()
			}
		}
</script>

<style>
/* 	.t11 #tab-first{
		width:28vw;
		text-align: center;
	}
	.t11 #tab-second{
		width: 28vw;
		text-align: center;
	}
	.t11 #tab-third{
		width: 28vw;
		text-align: center;
	} */
	.t11 button{
		width: 100px;
		height: 30px;
		background-color: coral;
		color: #fff;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px; /* future proofing */
		-khtml-border-radius: 10px; /* for old Konqueror browsers */
		text-align: center;
		vertical-align: middle;
		border: 1px solid transparent;
		font-weight: 900;
		font-size: 15px;
		border-radius: 5px;
	}
	.t11 .xj td{
		width: 30%;

	}
	.t11{
		font-size: 15px;
	}
	.t11 .ydy span {
		display: inline-block;
		/* width: 40%; */
		/* margin-top: 15px; */
	}
	.t11 .edit-form button{
		background-color: white;
	}
	.t11 #yuyuetan .el-dialog{
		box-shadow: 0 1px 3px rgb(0 0 0 /0%);
	}
	.t11 p{
		margin: 0;
	}
    .t11 .el-form-item__content{
		line-height: 2em;
	}
	.t11 .el-dialog__body{
		padding: 10px 20px;
	}
</style>
